import type { ToolCallResult } from "@shared/types/openai";
import { AlertCircle, CheckCircle, Settings } from "lucide-react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

interface ToolCallStatusIndicatorProps {
  toolCalls: ToolCallResult[];
  className?: string;
  compact?: boolean;
}

export function ToolCallStatusIndicator({
  toolCalls,
  className = "",
  compact = false,
}: ToolCallStatusIndicatorProps) {
  const [isAnimating, setIsAnimating] = useState(false);
  const { t } = useTranslation();

  const pendingCount = toolCalls.filter((tc) => tc.status === "pending").length;
  const successCount = toolCalls.filter((tc) => tc.status === "success").length;
  const errorCount = toolCalls.filter((tc) => tc.status === "error").length;

  useEffect(() => {
    if (pendingCount > 0) {
      setIsAnimating(true);
    } else {
      // Stop animation after a brief delay when all calls complete
      const timer = setTimeout(() => setIsAnimating(false), 500);
      return () => clearTimeout(timer);
    }
    return undefined;
  }, [pendingCount]);

  if (!toolCalls || toolCalls.length === 0) {
    return null;
  }

  const getStatusIcon = () => {
    if (pendingCount > 0) {
      return (
        <Settings
          className={`h-4 w-4 text-blue-500 ${isAnimating ? "animate-spin" : ""}`}
        />
      );
    }
    if (errorCount > 0) {
      return <AlertCircle className="h-4 w-4 text-red-500" />;
    }
    return <CheckCircle className="h-4 w-4 text-green-500" />;
  };

  const getStatusText = () => {
    if (compact) {
      if (pendingCount > 0)
        return t("chat.tool-calls.labels.compact-executing", {
          count: pendingCount,
        });
      if (errorCount > 0)
        return t("chat.tool-calls.labels.compact-completed", {
          completed: successCount,
          total: toolCalls.length,
        });
      return t("chat.tool-calls.labels.compact-all-completed", {
        count: toolCalls.length,
      });
    }

    if (pendingCount > 0) {
      return t("chat.tool-calls.labels.executing-tools", {
        count: pendingCount,
      });
    }

    const parts: string[] = [];
    if (successCount > 0)
      parts.push(
        t("chat.tool-calls.labels.success-count", { count: successCount }),
      );
    if (errorCount > 0)
      parts.push(
        t("chat.tool-calls.labels.error-count", { count: errorCount }),
      );

    return t("chat.tool-calls.labels.tools-completed", {
      summary: parts.join(", "),
    });
  };

  const getBgColor = () => {
    if (pendingCount > 0) return "bg-blue-50 border-blue-200";
    if (errorCount > 0) return "bg-red-50 border-red-200";
    return "bg-green-50 border-green-200";
  };

  if (compact) {
    return (
      <div
        className={`inline-flex items-center space-x-1 rounded px-2 py-1 text-xs ${getBgColor()} ${className}`}
      >
        {getStatusIcon()}
        <span className="font-medium">{getStatusText()}</span>
      </div>
    );
  }

  return (
    <div
      className={`flex items-center space-x-2 rounded-lg border p-2 ${getBgColor()} ${className}`}
    >
      {getStatusIcon()}
      <span className="font-medium text-gray-700 text-sm">
        {getStatusText()}
      </span>
    </div>
  );
}
